<html>
<body>
  <div class='my-legend'>
  <div class='legend-title'>Legend</div>
  <div class='legend-scale'>
    <ul class='legend-labels'>
      <li><span style='background:#8DD3C7;'></span>One</li>
      <li><span style='background:#FFFFB3;'></span>Two</li>
      <li><span style='background:#BEBADA;'></span>Three</li>
      <li><span style='background:#FB8072;'></span>Four</li>
      <li><span style='background:#80B1D3;'></span>etc</li>
    </ul>
  </div>
  </div>

  <style type='text/css'>
    .my-legend .legend-title {
      text-align: left;
      margin-bottom: 2px;
      margin-left: 2px;
      font-weight: bold;
      font-size: 90%;
      }
    .my-legend .legend-scale ul {
      margin: 0;
      margin-bottom: 5px;
      padding: 0;
      float: left;
      list-style: none;
      }
    .my-legend .legend-scale ul li {
      font-size: 80%;
      list-style: none;
      margin-left: 1px;
      line-height: 18px;
      margin-bottom: 2px;
      }
    .my-legend ul.legend-labels li span {
      display: block;
      float: left;
      height: 16px;
      width: 30px;
      margin-right: 5px;
      margin-left: 2px;
      border: 1px solid #999;
      }
    .my-legend .legend-source {
      font-size: 70%;
      color: #999;
      clear: both;
      }
    .my-legend a {
      color: #777;
      }
  </style>
</body>
</html>
